<template>
  <view class="page_min_height p-12 page_bg page_fixed_button">
    <DataLoading v-if="loading" />
    <template v-else>
      <view class="bg-white px-12 rounded-md">
        <view class="flex justify-between py-10 border-b border-solid border-gray-200">
          <view class="text-gray-400">工单编号</view>
          <view class="flex-1 ml-20 text-right">
            {{ detail.serviceTicket?.code || '-' }}
          </view>
        </view>
        <view class="flex justify-between py-10 border-b border-solid border-gray-200">
          <view class="text-gray-400">创建日期</view>
          <view class="flex-1 ml-20 text-right">
            {{ detail.created_at || '-' }}
          </view>
        </view>
        <view
          v-if="detail.serviceTicket?.owner?.name"
          class="flex justify-between py-10 border-b border-solid border-gray-200"
        >
          <view class="text-gray-400">负责人</view>
          <view>{{ detail.serviceTicket.owner.name }}</view>
        </view>
        <view class="flex justify-between py-10 border-b border-solid border-gray-200">
          <view class="text-gray-400">状态</view>
          <view class="px-6 py-4 text-xs rounded" :class="WORK_ORDER_STATUS_CLS[detail.serviceTicket?.status] || ''">
            {{ detail.serviceTicket?.status_text }}
          </view>
        </view>
        <view class="py-10">
          <view class="text-gray-400">诉求</view>
          <view class="mt-12">
            {{ detail.appeal || '-' }}
          </view>
        </view>
      </view>
    </template>
    <!-- 沟通记录 -->
    <MessageList v-if="serviceId" :serviceId="serviceId" />
  </view>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getConsultDetailApi } from '@/api/service';
import { WORK_ORDER_STATUS_CLS } from '@/libs/config';
import MessageList from '@/components/MessageList.vue';

const loading = ref(true);
const detail = ref({});
const serviceId = ref('');
let dataId = '';

onLoad(options => {
  dataId = options.id;
});

onShow(() => {
  getDetail();
});

async function getDetail() {
  const { code, data } = await getConsultDetailApi(dataId);
  loading.value = false;
  if (code === 200) {
    if (data.serviceTicket?.status === 'rejected') {
      data.serviceTicket.status = 'pending_assignment';
      data.serviceTicket.status_text = '待分配';
    }
    detail.value = data;
    serviceId.value = data.serviceTicket.id;
  }
}
</script>
